<script setup>
import { computed, ref } from "vue";
import { Autoplay, Pagination, Navigation, Scrollbar } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/css";
import "swiper/css/pagination";

const props = defineProps({
  height: {
    type: String,
  },
  categories: {
    type: Array,
    default: () => [],
  },
  autoplay: {
    type: Boolean,
    default: false,
  },
  pagination: {
    type: Boolean,
    default: false,
  },
  space: {
    type: [Number, String],
    default: 0,
  },
  slides: {
    type: [Number, String],
    default: 1,
  },
  swiperClass: {
    type: String,
    default: "",
  },
  showThumbs: {
    type: Boolean,
    default: false,
  },
  isOne: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(["click", "change"]);

const swiperInstance = ref(null);
const initial = ref(0);


const pagination = computed(() => {
  return props.pagination ? { clickable: true } : undefined;
});

const autoplay = computed(() => {
  return props.autoplay
    ? { delay: 2500, disableOnInteraction: false }
    : undefined;
});


const SwiperList = computed(() => {
  if (props.isOne) {
    return props.categories?.slice(0, 1) ?? []
  } else {
    return props.categories ?? []
  }
})

const isBtn = computed(() => {
  return SwiperList.value.length > 1
});

const modules = computed(() => {
  const activeModules = [Navigation];
  if (props.autoplay) activeModules.push(Autoplay);
  if (props.pagination) activeModules.push(Pagination);
  if (SwiperList.value.length > 5) activeModules.push(Scrollbar);
  return activeModules;
});


const onSwiper = (swiper) => {
  swiperInstance.value = swiper;
};

const onSlideChange = (swiper) => {
  initial.value = swiper.realIndex;
  emit("change", initial.value);
};

const slidePrev = () => {
  swiperInstance.value?.slidePrev();
};
const slideNext = () => {
  swiperInstance.value?.slideNext();

};


const handleClick = (cat, idx) => {
  emit("click", cat, idx);
}



</script>
<template>
  <div class="space-y-2 h-full relative px-6">
    <button class="absolute left-0 top-1/2 z-10 -translate-y-1/2 flex items-center justify-center select-none"
      :disabled="initial === 0" :class="initial === 0 ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'"
      @click.stop="slidePrev" v-if="isBtn">
      <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
        <path d="M13 16L7 10L13 4" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
      </svg>
    </button>
    <button class="absolute right-0 top-1/2 z-10 -translate-y-1/2 flex items-center justify-center select-none"
      :disabled="initial === categories.length - slides"
      :class="initial === categories.length - slides ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'"
      @click.stop="slideNext" v-if="isBtn">
      <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
        <path d="M7 4L13 10L7 16" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
      </svg>
    </button>
    <swiper :modules="modules" :slides-per-view="slides" :pagination="pagination" :autoplay="autoplay"
      :class="['w-full h-full', swiperClass]" :initial-slide="initial" @swiper="onSwiper" @slideChange="onSlideChange">
      <swiper-slide class="w-full h-full" v-for="(cat, idx) in SwiperList" :key="idx">
        <div :class="[height, 'relative rounded shadow-lg h-full']" @click="handleClick(cat, idx)">
          <slot :cat="cat"></slot>
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>

<style lang="scss" scoped></style>
